<script type="text/javascript">

function editGallery() {
        var row_id = $("#imageGalleriesTable").getGridParam("selrow");
        if(!row_id)
        {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select a gallery");
            $("#dialog").dialog('open');
        } else {
            document.location='/image/show-gallery-table-grid/groupid/'  + row_id;
        }
}

$(document).ready(function() {

        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });


    jQuery("#imageGalleriesTable").jqGrid({
           sortable: true,
           ajaxGridOptions : {type:"POST"},
           url:'/image/get-image-groups-table-json',
           datatype: "json",
           colNames:['Id','Title','Description','Path', 'Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'title',index:'title',width:150,editable:true},
               {name:'description',index:'description', width:150,editable:true},
               {name:'path',index:'path', width:150,editable:true},
               {name:'timestamp',index:'timestamp', width:160}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/image/set-image-groups-table-json',
           caption:"Image Galleries/Groups List" }).
           navGrid('#pager2',{edit:true,add:true,del:true})
               .navButtonAdd("#pager2",{
                 caption:"Edit Gallery",
                 onClickButton:editGallery,
                 position:"last",
                 title:"Add/Remove Gallery Images"})


});


</script>
<h3> Images Groups/Galleries</h3>
<table id="imageGalleriesTable" class="scroll" cellpadding="0" cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>

